<template>
  <div class="notifications-page">
    <div class="container">
      <div class="page-header">
        <h1 class="page-title">我的通知</h1>
        <div class="actions">
          <button 
            class="btn btn-primary" 
            @click="markAllAsRead" 
            v-if="unreadCount > 0"
          >
            全部标为已读
          </button>
        </div>
      </div>
      
      <div class="filter-tabs">
        <button 
          @click="setFilter('all')" 
          :class="{ active: filter === 'all' }"
        >
          全部通知
        </button>
        <button 
          @click="setFilter('unread')" 
          :class="{ active: filter === 'unread' }"
        >
          未读通知 <span v-if="unreadCount > 0">({{ unreadCount }})</span>
        </button>
      </div>
      
      <div class="notification-content">
        <div v-if="loading" class="loading-state">
          <div class="spinner"></div>
          <p>加载中，请稍候...</p>
        </div>
        
        <template v-else>
          <div v-if="notifications.length === 0" class="empty-state">
            <div class="empty-icon">
              <i class="icon-empty"></i>
            </div>
            <p class="empty-text">暂无{{ filter === 'unread' ? '未读' : '' }}通知</p>
          </div>
          
          <div v-else class="notification-list">
            <notification-item
              v-for="notification in notifications"
              :key="notification.id"
              :notification="notification"
              @update="refreshNotifications"
            />
          </div>
          
          <div class="pagination" v-if="totalCount > pageSize">
            <button 
              class="pagination-btn" 
              :disabled="currentPage === 1"
              @click="prevPage"
            >
              上一页
            </button>
            <span class="page-info">
              {{ currentPage }} / {{ totalPages }}
            </span>
            <button 
              class="pagination-btn" 
              :disabled="currentPage === totalPages"
              @click="nextPage"
            >
              下一页
            </button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, ref, onMounted, watch } from 'vue';
import { useNotificationStore } from '../stores/notification';
import NotificationItem from '../components/NotificationItem.vue';

export default {
  name: 'NotificationsPage',
  components: {
    NotificationItem
  },
  setup() {
    const notificationStore = useNotificationStore();
    const filter = ref('all');
    const currentPage = ref(1);
    const pageSize = ref(10);
    
    // 计算属性
    const notifications = computed(() => notificationStore.notifications);
    const loading = computed(() => notificationStore.loading);
    const unreadCount = computed(() => notificationStore.unreadCount);
    const totalCount = computed(() => notificationStore.totalCount);
    const totalPages = computed(() => Math.ceil(totalCount.value / pageSize.value));
    
    // 方法
    const setFilter = (newFilter) => {
      filter.value = newFilter;
      currentPage.value = 1; // 重置到第一页
    };
    
    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
      }
    };
    
    const nextPage = () => {
      if (currentPage.value < totalPages.value) {
        currentPage.value++;
      }
    };
    
    const refreshNotifications = async () => {
      const params = {
        pageNum: currentPage.value,
        pageSize: pageSize.value
      };
      
      if (filter.value === 'unread') {
        params.isRead = 0;
      }
      
      await notificationStore.fetchNotifications(params);
      await notificationStore.fetchUnreadCount();
    };
    
    const markAllAsRead = async () => {
      await notificationStore.readAllNotifications();
      refreshNotifications();
    };
    
    // 监听筛选器和页码变化，重新获取数据
    watch([filter, currentPage], () => {
      refreshNotifications();
    });
    
    // 组件挂载时加载数据
    onMounted(() => {
      refreshNotifications();
    });
    
    return {
      filter,
      currentPage,
      pageSize,
      notifications,
      loading,
      unreadCount,
      totalCount,
      totalPages,
      setFilter,
      prevPage,
      nextPage,
      refreshNotifications,
      markAllAsRead
    };
  }
}
</script>

<style scoped>
.notifications-page {
  padding: 24px 0;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  margin: 0;
  color: #333;
}

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background-color: #1677ff;
  color: white;
}

.btn-primary:hover {
  background-color: #0958d9;
}

.filter-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}

.filter-tabs button {
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  position: relative;
}

.filter-tabs button.active {
  color: #1677ff;
  font-weight: 500;
}

.filter-tabs button.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background-color: #1677ff;
}

.notification-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.loading-state {
  padding: 60px 0;
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #1677ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  padding: 60px 0;
  text-align: center;
}

.empty-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
}

.icon-empty {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9d9d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.empty-text {
  color: #999;
  font-size: 14px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #eee;
}

.pagination-btn {
  padding: 6px 12px;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  font-size: 14px;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #e6f4ff;
  border-color: #91caff;
  color: #1677ff;
}

.pagination-btn:disabled {
  color: #d9d9d9;
  cursor: not-allowed;
}

.page-info {
  margin: 0 16px;
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .actions {
    margin-top: 12px;
  }
}
</style> 